<template>
  <div id="oecdmid">

    <div class="box">
      <img style="width:100%" src="../assets/img/mid/img01.png" alt="">
      <div class="item1">
        <div class="text1">立案总数</div>
        <countTo class="text3" :decimals="2" :startVal='0' :endVal='endVal1' :duration='6000'></countTo>
        <div class="text2">万件</div>
      </div>
      <div class="item2">
        <div class="text1">信访数</div>
        <countTo class="text3" :decimals="2" :startVal='0' :endVal='endVal2' :duration='6000'></countTo>
        <div class="text2">万件</div>
      </div>
      <div class="item3">
        <div class="text1">清廉指数</div>
        <countTo class="text3" :decimals="1" :startVal='0' :endVal='endVal3' :duration='6000'></countTo>
        <div class="text2">%</div>
      </div>
      <div class="item4">
        <div class="text1">人员数量</div>
        <countTo class="text3" :decimals="2" :startVal='0' :endVal='endVal4' :duration='6000'></countTo>
        <div class="text2">万人</div>
      </div>
      <div class="item5">
        <div class="text1">项目资金</div>
        <countTo class="text3" :startVal='0' :endVal='endVal5' :duration='6000'></countTo>
        <span class="text2">元</span>
      </div>
    </div>

  </div>
</template>

<script>
import countTo from "vue-count-to";
import { post, get } from "@/utils/axios";

export default {
  name: "oecdmid",
  components: { countTo },
  data() {
    return {
      timer: null,
      endVal1: 6.66,
      endVal2: 3.88,
      endVal3: 98,
      endVal4: 6.7,
      endVal5: 1326112310
    };
  },
  created() {
    this.timer = setInterval(() => {}, 120000);
  },
  mounted() {},
  destroyed() {
    this.timer = null;
  },

  methods: {}
};
</script>business

<style lang="scss" scoped>
#oecdmid {
  width: 100%;
  padding-top: 0.6rem;
  // border: 1px solid aqua;
  .box {
    margin: 0 auto;
    width: 4.44rem;
    text-align: center;
    position: relative;
    .text1 {
      font-size: 0.12rem;
      margin-bottom: 0.06rem;
    }
    .text3 {
      font-style: italic;
      font-family: "electronicFont";
      letter-spacing: 3px;
      font-size: 0.3rem;
      line-height: 0.3rem;
    }
    .text2 {
      font-size: 0.12rem;
    }
    .item1 {
      position: absolute;
      left: 0.4rem;
      top: 0.62rem;
    }
    .item2 {
      position: absolute;
      left: 1.16rem;
      top: 0.2rem;
    }
    .item3 {
      position: absolute;
      right: 1.06rem;
      top: 0.2rem;
    }
    .item4 {
      position: absolute;
      right: 0.38rem;
      top: 0.62rem;
    }
    .item5 {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, -40%);
    }
  }
}
</style>
